﻿<script setup lang="ts" name="EpLink">
import useScrollPosition from '@/hooks/scrollPosition'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
const route = useRoute()
const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)

// 滚动行为
useScrollPosition(route)
</script>
<template>
  <el-space :size="systemConfig.space" fill>
    <el-row>
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>基础用法</span>
            </div>
          </template>
          <el-form>
            <el-form-item>
              <el-link href="https://www.baidu.com" target="_blank">默认链接</el-link>
              <el-link type="primary">主要链接</el-link>
              <el-link type="success">成功链接</el-link>
              <el-link type="warning">警告链接</el-link>
              <el-link type="danger">危险链接</el-link>
              <el-link type="info">信息链接</el-link>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>禁用状态</span>
            </div>
          </template>
          <el-form>
            <el-form-item>
              <el-link href="https://www.baidu.com" target="_blank" disabled>默认链接</el-link>
              <el-link type="primary" disabled>主要链接</el-link>
              <el-link type="success" disabled>成功链接</el-link>
              <el-link type="warning" disabled>警告链接</el-link>
              <el-link type="danger" disabled>危险链接</el-link>
              <el-link type="info" disabled>信息链接</el-link>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>下划线</span>
            </div>
          </template>
          <el-form>
            <el-form-item>
              <el-link href="https://www.baidu.com" target="_blank" :underline="false">无下划线</el-link>
              <el-link href="https://www.baidu.com" target="_blank">有下划线</el-link>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>带图标链接</span>
            </div>
          </template>
          <el-form>
            <el-form-item>
              <el-link icon="Edit">编辑</el-link>
              <el-link>
                选中
                <svg-icon class="el-icon--right" icon="ep:check"></svg-icon>
              </el-link>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}
</style>
